<template>
  <div style="margin-bottom: 10px">
    <a-tag style="width: 170px;font-size: 15px;font-weight: bold" color="#87d068" type="success"
      >账户余额: {{ formData.sumBalance }}元</a-tag
    >
  </div>
  <Collapse v-model:activeKey="activeKey" :bordered="false">
    <CollapsePanel
      key="1"
      :header="'进账(平台会员充值): ' + formData.memberWechatCharge + '元'"
    >
      <Descriptions bordered :column="1" :labelStyle="{ width: '150px' }">
        <DescriptionsItem
          label="微信"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.memberChargeTotal }}元</DescriptionsItem
        >
      </Descriptions>
    </CollapsePanel>
    <CollapsePanel
      key="2"
      :header="'进账(企业充值): ' + formData.companyBankCharge + '元'"
    >
      <Descriptions bordered :column="1" :labelStyle="{ width: '150px' }">
        <DescriptionsItem
          label="银行转账"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.companyChargeTotal }}元</DescriptionsItem
        >
      </Descriptions>
    </CollapsePanel>
    <CollapsePanel
      key="3"
      :header="'累计消费(平台会员): ' + formData.memberSumAmount + '元'"
    >
      <Descriptions bordered :column="1" :labelStyle="{ width: '150px' }">
        <DescriptionsItem
          label="充电支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.memberPowerAmount }}元</DescriptionsItem
        >
        <DescriptionsItem
          label="服务费支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.memberServiceAmount }}元</DescriptionsItem
        >
        <DescriptionsItem
          label="停车支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.memberParkAmount }}元</DescriptionsItem
        >
      </Descriptions>
    </CollapsePanel>
    <CollapsePanel
      key="4"
      :header="'累计消费(企业会员): ' + formData.companySumAmount + '元'"
    >
      <Descriptions bordered :column="1" :labelStyle="{ width: '150px' }">
        <DescriptionsItem
          label="充电支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.companyPowerAmount }}元</DescriptionsItem
        >
        <DescriptionsItem
          label="服务费支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.companyServiceAmount }}元</DescriptionsItem
        >
        <DescriptionsItem
          label="停车支付"
          :contentStyle="{ color: 'red', 'font-weight': 'bold' }"
          >{{ formData.companyParkAmount }}元</DescriptionsItem
        >
      </Descriptions>
    </CollapsePanel>
  </Collapse>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {
  Collapse,
  CollapsePanel,
  Descriptions,
  DescriptionsItem,
  Row,
  Col,
} from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { defHttp } from '@/utils/http/axios';
import { BasicTable, useTable } from '@/components/Table';
import { orderColumns } from '@/views/admin/bill/data';
const emit = defineEmits(['success', 'register']);
const activeKey = ref('1');
const { createMessage } = useMessage();
// const [
//   registerTable,
//   {  setTableData },
// ] = useTable({
//   //title: '列表',
//   api: '/admin/bill/list',
//   columns: orderColumns,
//   showIndexColumn: true,
//   useSearchForm: false,
//   indexColumnProps: {
//     fixed: 'left',
//   },
//   // pagination: true,
//   bordered: true,
//   rowKey: 'id',
// });

const [registerTable, { getDataSource, setTableData }] = useTable({
  columns: orderColumns,
  showIndexColumn: false,
  showTableSetting: false,
  rowKey: 'id',

  // scroll: { y: '100%' },
});
const formData = ref({});
// 文档名称
// const formData = ref({
//   billNo: '999',
//   amount: '',
//   status: '',
//   type: '',
//   companyName: '',
//   taxRegistryNumber: '',
//   bank: '',
//   bankAccount: '',
//   registeredAddress: '',
//   registeredMobile: '',
//   createDate: '',
//   name: '',
//   mPhone: '',
//   powerAmount: '',
//   serviceAmount: '',
//   parkAmount: '',
//   pileTimeoutAmount: '',
//   email: '',
//   bileType: '',
//   memo: '',
// });
onMounted(() => {
  getFormData();
});
function change() {
  // if (activeKey.value == '1') {
  //   activeKey.value = '2';
  // } else if (activeKey.value == '2') {
  //   activeKey.value = '1';
  // }
}
async function getFormData() {
  debugger;
  const res = await defHttp.get({
    url: '/admin/recharge_manager/statistics',
  });
  if (res) {
    debugger;
    formData.value = res;
    // setTableData([]);
  }
}
</script>
